<!DOCTYPE html>
<script src="../../resources/js-test.js"></script>
<script>
    if (window.testRunner)
        testRunner.dumpAsText();
</script>
<body style="margin-left:10px; margin-top:15px;">
    <!-- Make a container with 9 lines. With three columns, that means three lines per column. -->
    <div style="-webkit-columns:3; columns:3; column-gap:1em; -webkit-column-gap:1em; width:32em; orphans:1; widows:1;">
        <br>
        <br>
        <br>
        <br>
        <br>
        <span id="elm">
            <!-- This is at a column boundary, where the first line fits in the second column, while
                 the second line is in the third column. -->
            XXXXXXXXXXXXXXXXXXXXXXXXXX
            XXXXXXXXXXXXXXXXXXXXXXXXXX
        </span><br>
        <br>
        <br>
    </div>
    <script>
        var rects = document.getElementById('elm').getClientRects();
        shouldBe("rects.length", "2");
        shouldBeGreaterThan("rects[1].left", "rects[0].left");
        shouldBeGreaterThan("rects[0].top", "rects[1].top");
        shouldBeGreaterThan("rects[0].right - rects[0].left", "0");
        shouldBe("rects[1].right - rects[1].left", "rects[0].right - rects[0].left");
        shouldBeGreaterThan("rects[0].bottom - rects[0].top", "0");
        shouldBe("rects[1].bottom - rects[1].top", "rects[0].bottom - rects[0].top");
    </script>
</body>
